<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放页</title>
    
    <link rel="stylesheet" href="D:\img\camera.html">
</head>

<body>
    <header>
        <div class="navBar">
            <div class="titleLeft">
                <a href="#" class="titleLink">
                    开课吧首页
                </a>
                <a href="#" class="titleLink">
                    创业微学院
                </a>
                <a href="#" class="titleLink">
                    摄影微学院
                </a>
                <a href="#" class="titleLink">
                    微聚
                </a>
                <a href="#" class="titleLink">
                    论坛
                </a>
            </div>
            <div class="titleRight">
                <a href="#" class="titleLink">登录/注册</a>
                <a href="#" class="titleLink">播放记录</a>
                <a href="#" class="titleLink">APP下载</a>
            </div>
        </div>
    </header>
    <nav class="sub-nav">
        <div class="titleLeft">
            <a href="#" class="titleLink2">
                <span style="font-size:30px">摄影</span>
                <span style="font-size:20px">开课吧</span>
            </a>
        </div>
        <a href="#">个人中心</a>
        <a href="#">视频播放</a>

        </div>
    </nav>

    <div class="container">
        <div class="main-content">
            <div>正在播放：初学者怎么挑选镜头</div>
            <div class="video-player">
                <div class="video-controls">
                    <div class="progress">
                        <div class="progress-bar"></div>
                    </div>
                    <div class="info">
                        <div>00:00 / 03:58</div>
                        
                    </div>
                </div>
            </div>

            <!-- 视频统计信息 -->
            <div class="video-stats">
                <span><i class="fa fa-thumbs-up"></i> 1212</span>
                <span><i class="fa fa-heart"></i> 收藏</span>
                <span><i class="fa fa-share"></i> 分享</span>
                <span style="margin-left:auto;">12.5万次播放</span>
            </div>

            <!-- 选集 -->
            <div class="episode-title">选集：共24集</div>
            <div class="episode-grid">
                <div class="episode-item"></div>
                <div class="episode-item"></div>
                <div class="episode-item"></div>
                <div class="episode-item"></div>
                <div class="episode-item"></div>
                <div class="episode-item"></div>
                <!-- 可继续添加更多选集 -->
            </div>

            <!-- 相关视频 -->
            <div class="related-title">相关视频</div>
            <div class="related-grid">
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
                <div class="related-item"></div>
            </div>
            <!-- 评论区 -->
            <div class="comment-title">评论：</div>
            <textarea class="comment-box" placeholder="快来点评两句..."></textarea>
            <button class="comment-btn">发表评论</button>
        </div>
        <!-- 侧边栏 -->
        <div class="sidebar">
            <!-- 视频信息 -->
            <div class="sidebar-title">视频信息</div>
            <div class="video-info">
                <p>初学者怎么挑选镜头</p>
                <p>挑选镜头先明确需求，定焦画质好、光圈大但焦距固定，变焦灵活却画质稍逊。根据拍摄主题选焦距，适配相机传感器，关注光圈、防抖、对焦，新手可选变焦或廉价定焦，人像用定焦，风光用广角或全能变焦，专业需求备长焦，按需组合。</p>
                <a href="#">详情></a>
            </div>
            <!-- 精选活动 -->
            <div class="sidebar-title">精选活动</div>
            <div class="activity-grid">
                <div class="activity-item"></div>
                <div class="activity-item"></div>
                <div class="activity-item"></div>
            </div>
        </div>
    </div>
</body>
<style>
     @import url("video.css")
    </style>
</html>